:root {
  --border-size: 1px;
  --border-size-med: 2px;
  --border-style: solid;
  --border-color: #f0f0f0;
}

.bordered,
:local(.bordered) {
  border: var(--border-size) var(--border-style) var(--border-color);
}

.border-bottom,
:local(.border-bottom) {
  border-bottom: var(--border-size) var(--border-style) var(--border-color);
}

/* ensure that a border-top item inside of a bordred element won't double up */
.bordered .border-bottom:last-child {
  border-bottom: none;
}

.border-top,
:local(.border-top) {
  border-top: var(--border-size) var(--border-style) var(--border-color);
}

/* ensure that a border-top item inside of a bordred element won't double up */
.bordered .border-top:first-child {
  border-top: none;
}

.border-column-divider {
  border-right: var(--border-size) var(--border-style) var(--border-color);
}

.border-column-divider:last-child {
  border-right: none;
}

.border-row-divider {
  border-bottom: var(--border-size) var(--border-style) var(--border-color);
}

.border-row-divider:last-child {
  border-bottom: none;
}

.border-right {
  border-right: var(--border-size) var(--border-style) var(--border-color);
}

.border-left {
  border-left: var(--border-size) var(--border-style) var(--border-color);
}

.border-light {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.border-dark,
.border-dark-hover:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.border-grey-1 {
  border-color: var(--grey-1) !important;
}
.border-grey-2 {
  border-color: var(--grey-2) !important;
}

.border-green {
  border-color: var(--green-color) !important;
}

.border-purple {
  border-color: var(--purple-color) !important;
}

.border-error,
:local(.border-error) {
  border-color: var(--error-color) !important;
}

.border-gold {
  border-color: var(--gold-color) !important;
}

.border-success {
  border-color: var(--success-color) !important;
}

.border-brand,
:local(.border-brand) {
  border-color: var(--brand-color) !important;
}

.border-brand-hover:hover {
  border-color: var(--brand-color);
}

.border-hover:hover {
  border-color: color(var(--border-color) shade(20%));
}

/* BORDERLESS IS THE DEFAULT */
/* ONLY USE IF needing to override an existing border! */
/* ensure there is no border via important */
.borderless,
:local(.borderless) {
  border: none !important;
}

.border-dashed {
  border-style: dashed;
}

.border-med {
  border-width: var(--border-size-med);
}
